import { connect } from 'dva'
import styles from './Clause.scss'
import ReactSVG from 'react-svg'
import { Checkbox } from 'antd'
import { Button, Toast } from 'antd-mobile'
const Clause = ({dispatch, 
  contractSign:{
    contract:{clauseAgree}
  },
  query
}) => {
  console.log(query)
  const onChange = (e) => {
    console.log(e.target.checked)
    dispatch({
      type: 'contractSign/changeAgree',
      payload: {
        contract: {
          clauseAgree:e.target.checked
        }
      }
    })
  }
  const agreeAct = () => {
    if (!clauseAgree) {
      Toast.info('请先同意服务协议', 1)
    } else {
      dispatch({
        type: 'modules/getModules',
        payload: {
          pathname: '',
          businessId: '1231241228',
          process: 'contractSign',
          title: '电子合同签署'
        }
      })
    }
  }
  return (
    <div className={styles.clauseContainer}>
      <div className={styles.contentContainer}>
        <div className={styles.clauseTitle}>
          {query.title}
        </div>
        <div className={styles.productContainer}>
          {query.type === 'OTO' ? <div className={styles.productType}>
              OTO产品
            </div> : null
          }
          <div className={styles.productCode}>
            {query.code}
          </div>
        </div>
        <div className={styles.clauseTip}>
          <span>
            尊敬的客户，请您仔细阅读理解并接受以下条款
          </span>
        </div>
      </div>
      <div className={styles.fileContainer}>
        <div className={styles.itemContent}>
          <ReactSVG src='svg/contractSign/pdf.svg' svgClassName={styles.svgSize}></ReactSVG>
          <div className={styles.text}>
          宝鼎16期限额特定集合资产管理计划风险揭示书.pdf
          </div>
          <ReactSVG src='svg/contract/next.svg' svgClassName={styles.nextSize}></ReactSVG>
        </div>
        <div className={styles.itemContent}>
          <ReactSVG src='svg/contractSign/word.svg' svgClassName={styles.svgSize}></ReactSVG>
          <div className={styles.text}>
          <a target='blank' style={{color:'#333333'}} href="http://view.officeapps.live.com/op/view.aspx?src=http://zjg-test.oss-cn-shanghai.aliyuncs.com/zjgfiles/20171102175741_%E5%BC%A0%E5%AE%B6%E6%B8%AF%E4%BA%A7%E4%B8%9A%E8%B5%84%E6%9C%AC%E4%B8%AD%E5%BF%83%E4%BC%81%E4%B8%9A%E5%85%A5%E9%A9%BB%E6%8E%88%E6%9D%83%E4%B9%A6.docx">
            申银万国宝鼎16期限额特定集合资产管理计划说明书.word
          </a>
          </div>
          <ReactSVG src='svg/contract/next.svg' svgClassName={styles.nextSize}></ReactSVG>
        </div>
        <div className={styles.itemContent}>
          <ReactSVG src='svg/contractSign/ppt.svg' svgClassName={styles.svgSize}></ReactSVG>
          <div className={styles.text}>
            <a target='blank' style={{color:'#333333'}} href="http://contract-test.oss-cn-shanghai.aliyuncs.com/10cc6dff_159b5521d36_27/0f0a135bd23a15e390199ecf54ab0104.pdf">
            宝鼎16期限额特定集合资产管理计划资产管理合同.ppt
            </a>
          </div>
          <ReactSVG src='svg/contract/next.svg' svgClassName={styles.nextSize}></ReactSVG>
        </div>
      </div>
      <div className={styles.agree}>
        <Checkbox onChange={onChange}>
            <span className={styles.textSize}>
              已阅读条款内容并接受以上条款
            </span>
        </Checkbox>
      </div>
      <Button type='primary' onClick={agreeAct} className={styles.longButton}>同意协议并下一步</Button>
    </div>
  )
}
const mapState = state => {
  return {
    contractSign:state.contractSign,
    query:state.modules.query
  }
}
export default connect(mapState)(Clause)
